<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
  	<title>购物车--东西互联网</title>
    <link rel="stylesheet" href="css/mui.css" />
    <link rel="stylesheet" href="css/muiicon.css" />
    <link rel="stylesheet" href="css/jquery.mmenu.all.css" />
    <link rel="stylesheet" href="css/default.css" />
</head>
	<body>
			<div class="page">
				<header class="mui-bar mui-bar-nav" >
					 <a href="javascript:history.back();"  class="mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
						<span class="mui-icon mui-icon-left-nav"></span> <span class="title">购物车</span></span>
					</a>
					<h1 class="mui-title" id="title"></h1>
				</header>
				<div class="mui-content">
					<!-- 购物车列表  -->
					<div class="carts-header"><a id="btnEdit" class="mui-btn mui-btn-link mui-pull-right">编辑</a><a id="btnComplete" class="mui-hidden mui-btn mui-btn-link mui-pull-right">完成</a></div>
					<ul class="mui-table-view carts-list">
							<li class="mui-table-view-cell mui-media">
								<a class="mui-pull-left"  href= "product_view.html">
									<img class="mui-media-object" src="img/category_feicui.jpg">
								</a>
								<div class="mui-media-body" style="padding-left: 10px;">
										<p class='mui-ellipsis-2' style="color: #000;"> 水贝珠宝电子商水贝珠宝电子商水贝珠宝电子商务首挑大梁水贝珠宝电子商务首挑大梁</p>
										<p><span class="carts-price"> 200.00 </span> <span class="carts-single-total"> 200.00 </span><span class="carts-number mui-pull-right">1</span></p>
										<div class="carts-edit-box">
												<div class="mui-numbox"  data-numbox-min='1' data-numbox-max='10000' style="float: left;">
													<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
													<input class="mui-numbox-input"  type="number" />
													<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
												</div>
												<a class="mui-pull-right"><span class="mui-icon mui-icon-trash"></span></a>
										</div>	
								</div>
							</li>
							
							<li class="mui-table-view-cell mui-media">
								<a class="mui-pull-left"  href= "product_view.html">
									<img class="mui-media-object" src="img/category_feicui.jpg">
								</a>
								<div class="mui-media-body" style="padding-left: 10px;">
										<p class='mui-ellipsis-2' style="color: #000;"> 水贝珠宝电子商水贝珠宝电子商水贝珠宝电子商务首挑大梁水贝珠宝电子商务首挑大梁</p>
										<p><span class="carts-price"> 120.00 </span> <span class="carts-single-total"> 120.00 </span><span class="carts-number mui-pull-right">1</span></p>
										<div class="carts-edit-box">
												<div class="mui-numbox"  data-numbox-min='1' data-numbox-max='10000' style="float: left;">
													<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
													<input class="mui-numbox-input"  type="number" />
													<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
												</div>
												<a class="mui-pull-right"><span class="mui-icon	mui-icon-trash"></span></a>
										</div>	
								</div>
							</li>
							
							<li class="mui-table-view-cell mui-media">
								<a class="mui-pull-left"  href= "product_view.html">
									<img class="mui-media-object" src="img/category_feicui.jpg">
								</a>
								<div class="mui-media-body" style="padding-left: 10px;">
										<p class='mui-ellipsis-2' style="color: #000;"> 水贝珠宝电子商水贝珠宝电子商水贝珠宝电子商务首挑大梁水贝珠宝电子商务首挑大梁</p>
										<p><span class="carts-price"> 100.00 </span> <span class="carts-single-total"> 100.00 </span><span class="carts-number mui-pull-right">1</span></p>
										<div class="carts-edit-box">
												<div class="mui-numbox"  data-numbox-min='1' data-numbox-max='10000' style="float: left;">
													<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
													<input class="mui-numbox-input"  type="number" />
													<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
												</div>
												<a class="mui-pull-right"><span class="mui-icon	mui-icon-trash"></span></a>
										</div>	
								</div>
							</li>
					</ul>
					<div class="carts-goumai">
						<div class="mui-pull-left"><span class="carts-total">0.00</span></div>
						<a  id="btnCount" class="mui-btn mui-btn-danger mui-pull-right" style="background-color: rgb(224,125,125);">结 算</a>
					</div>
					<!-- end 购物车列表  -->
				</div>
			</div>
		
		<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
		<script type="text/javascript" src="js/jquery.mmenu.min.all.js" ></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js" ></script>
		<script type="text/javascript" src="js/mui.min.js" ></script>
		<script>
			 $(function(){
			 		//编辑
			 		$("#btnEdit").on('click',function(){
					 		$("#btnEdit").addClass("mui-hidden");
			 				$("#btnComplete").removeClass("mui-hidden");
			 				$(".carts-edit-box").fadeIn();
			 		});
			 		//完成
			 		$("#btnComplete").on('click',function(){
					 		$("#btnComplete").addClass("mui-hidden");
			 				$("#btnEdit").removeClass("mui-hidden");
			 				$(".carts-edit-box").fadeOut();
			 				
			 				//获取所有数量的取值
			 				var total = 0;
			 				$(".carts-edit-box").find(".mui-numbox-input").each(function(){
			 					var pBox = $(this).parent().parent().parent();
			 					//单价
			 					var price = pBox.find(".carts-price").text()*1;
			 					//数量
			 					var num = $(this).val()*1;
			 					pBox.find(".carts-number").text(num);
			 					//小计
			 					var sTotal = (price*num).toFixed(2);
			 					pBox.find(".carts-single-total").text(sTotal);
			 					
			 					total += sTotal*1;
			 					
			 					$(".carts-total").text(total.toFixed(2));
			 				});
			 				
			 		});
			 		
			 		/**
			 		 * 获取数量数组，更新记录的数量时用到
			 		 */
			 		function getCartsNumArray(){
			 			var arr = [];
			 			$(".carts-edit-box").find(".mui-numbox-input").each(function(){
			 				arr.push($(this).val());
			 			});
			 			return arr;
			 		}
			 		//计算
			 		$("#btnCount").on('click',function(){
			 			if($("#btnEdit").hasClass("mui-hidden")){
			 				alert("请先完成编辑后再结算");
			 				return;
			 			}
			 			
			 		});
			 		
			 		
			 		//备注：分页加载时会有 新的numbox   待界面渲染完后用  $('.mui-numbox').numbox() 激活一下 
			 })
		</script>
	</body>
</html>
